<template>
  <!-- 购物车模块 -->
  <div class="cart">
    <!-- 顶部导航 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{ length }})</div>
      <div slot="right" class="nav-bar-right" @click="ClickcartSwitch">
        {{ cartSwitch }}
      </div>
    </nav-bar>
    <!-- 商品列表 -->
    <cart-list></cart-list>
    <!-- 底部的汇总 -->
    <cart-bottom-bar :cartbottombarJudge="judge"/>
    <!-- .native 监听组件的修饰符  返回顶部按钮-->
    <back-top @click.native="backCLick" v-show="isShowBackTop" />
  </div>
</template>

<script>
// 导入混入函数
import { backTopMixin } from "common/mixin";
// 导入顶部导航组件
import NavBar from "components/common/navbar/NavBar.vue";
// 导入 商品列表的组件
import CartList from "./childComps/CartList";
// 底部的汇总组件
import CartBottomBar from "./childComps/CartBottomBar.vue";

// 导入Vuex的mapGetters辅助函数  mapGetters辅助函数仅仅是将store(Vuex实例的对象)中的个getter(计算属性)映射到局部计算属性
import { mapGetters } from "vuex";

export default {
  name: "Cart",
  components: {
    NavBar,
    CartList,
    CartBottomBar,
  },
  data() {
    return {
      cartSwitch: "编辑",
      judge: false,
    };
  },
    mixins:[backTopMixin],
  // 计算属性
  computed: {
    // 使用Vuex的map辅助函数
    // 两种语法
    // 1.数组的写法
    //  ...mapGetters([
    //    'cartLength',
    //    'cartList'
    //  ])
    // 2.对象的写法
    ...mapGetters({
      //  顶部导航的数据
      length: "cartLength",
    }),
  },
  methods: {
    ClickcartSwitch() {
      if (this.judge) {
        this.cartSwitch = "编辑";
        this.judge = false;
      } else {
        this.cartSwitch = "完成";
        this.judge = true;
      }
    },
  },
};
</script>

<style scoped>
.cart {
  height: 100vh;
  position: relative;
}
.nav-bar {
  position: fixed;
  background-color: #ff8198;
  font-weight: 700;
  font-size: 23px;
  color: #fff;
  z-index: 9;
}
.nav-bar-right {
  font-size: 19px;
  flex-wrap: 400;
  /* color: #000; */
}
</style>